/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { PureComponent } from 'react';
import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { withRouter } from 'react-router';
import { Row, Col, Form, Select, Layout, Upload, Button, InputNumber, Table, Input, Alert, Spin, Modal, Drawer, Divider, Icon, Badge, PageHeader, Tabs, Card } from 'antd';





class BigExamineAssembleDetail extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            queryForm: {},
            path: ''
        }
    }
    componentDidMount() {
        console.log(this.props.location)
        this.setState({
            title: this.props.location?.data ? this.props.location.data.title : JSON.parse(localStorage.getItem('BigExamineAssemble_Report')).title,
            queryForm: this.props.location?.data ? this.props.location.data.queryForm : JSON.parse(localStorage.getItem('BigExamineAssemble_Report')).queryForm,
            path: this.props.location?.data ? this.props.location.data.path : JSON.parse(localStorage.getItem('Precision_Report')).path,
        })
    }
    handlePrint = () => {
        let printReport = document.getElementById('printReport')
        console.log(printReport)
        var flag = false;
        console.log(printReport.offsetHeight)
        if (printReport.offsetHeight === 0) {
            flag = false;
            // return;
        } else {
            flag = true
        }
        if (flag) {
            clearTimeout(times);
            setTimeout(() => {
                var printInnerHTML = printReport.innerHTML;
                window.document.body.innerHTML = printInnerHTML
                window.print();
                window.location.reload();
            });
        } else {
            var times = setTimeout(() => {
                this.print()
            }, 500);
        }
    }

    render() {
        const { form: { getFieldDecorator } } = this.props;
        const { title, queryForm, path } = this.state

        let dataSource = [], index = 0
        if (queryForm?.dataSource?.length > 0) {
            queryForm.dataSource.map(item => {
                if (dataSource.length > 0) {
                    let a, newItem, newIndex
                    for (let i in dataSource) {
                        a = dataSource[i].find(e => e.name == item.name)
                        if (a) {
                            newItem = item
                            newIndex = i
                            break
                        }
                        newItem = item
                    }
                    if (a) {
                        dataSource[newIndex].push(newItem)
                    } else {
                        dataSource[index] = []
                        dataSource[index].push(newItem)
                        index++
                    }
                } else {
                    dataSource[index] = []
                    dataSource[index].push(item)
                    index++
                }
            })
        }
        console.log(dataSource, 'dataSource');

        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => this.props.history.push({ pathname: '/' + path })}
                        title={<div>{title ? title : '大机装配检查记录表（装配过程）'}</div>}
                        extra={<Button type='primary' icon='printer' onClick={this.handlePrint}>打印</Button>}
                    >
                    </PageHeader>
                </BasicLayoutSearch>
                <Layout className="layout-model">
                    <div id='printReport'>
                        <div style={{ width: 900, textAlign: 'center', margin: '0 auto', padding: '40px 100px 20px' }}>
                            <div style={{ fontSize: 20, fontWeight: 'bold', padding: '20px 0 30px 0' }}>附录6  大机装配检查记录表（装配过程）</div>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div><span>机型/批号：</span><span style={{ display: 'inline-block', width: 400, textAlign: 'left', borderBottom: '1px solid #000000a6' }}>{queryForm?.formData?.model}</span></div>
                                {
                                    // isInPlant   0 厂外  1 厂内
                                    queryForm?.formData?.isInPlant == 1 ?
                                        <div style={{ textAlign: 'right' }}>厂外（） 厂内（√）</div>
                                        :
                                        queryForm?.formData?.isInPlant == 0 ?
                                            <div style={{ textAlign: 'right' }}>厂外（√） 厂内（）</div>
                                            :
                                            <div style={{ textAlign: 'right' }}>厂外（） 厂内（）</div>
                                }
                            </div>
                            <br />
                            <table border={1} cellPadding={0} cellSpacing={0}>
                                <colgroup>
                                    <col width={50} />
                                    <col width={50} />
                                    <col width={500} />
                                    <col width={100} />
                                </colgroup>
                                <tbody>
                                    <tr height={50}>
                                        <td>序号</td>
                                        <td>类别</td>
                                        <td>要求项目内容</td>
                                        <td>确认</td>
                                    </tr>
                                    {
                                        queryForm?.dataSource?.length > 0 ?
                                            null
                                            :
                                            <tr height={60}>
                                                <td colSpan={5}>无数据</td>
                                            </tr>
                                    }

                                    {
                                        dataSource.map((e, i) => {
                                            return e.map((item, index) => {
                                                return (
                                                    i <= 1 ?
                                                        <tr>
                                                            {index > 0 ? null : <td rowSpan={e.length}>{i + 1}</td>}
                                                            {index > 0 ? null : <td rowSpan={e.length} style={{ padding: 5 }}>{item.name}</td>}
                                                            <td style={{ textAlign: 'left', padding: 5 }}>{i + 1}.{index + 1}  {item.checkStandard}</td>
                                                            <td>{item.confirm}</td>
                                                        </tr>
                                                        : null
                                                )
                                            })
                                        })
                                    }
                                </tbody>

                            </table>
                            <div style={{ textAlign: 'right', paddingTop: 10 }}>表格编号：{queryForm?.formData?.formCoding}</div>
                        </div>

                        {
                            queryForm?.dataSource?.length > 0 ?
                                <div style={{ width: 900, textAlign: 'center', margin: '0 auto', padding: '40px 100px 20px' }}>
                                    <div style={{ fontSize: 20, fontWeight: 'bold', padding: '20px 0 30px 0' }}>附录6  大机装配检查记录表（装配过程）</div>
                                    <table border={1} cellPadding={0} cellSpacing={0}>
                                        <colgroup>
                                            <col width={50} />
                                            <col width={50} />
                                            <col width={500} />
                                            <col width={100} />
                                        </colgroup>
                                        <tbody>
                                            <tr height={50}>
                                                <td>序号</td>
                                                <td>类别</td>
                                                <td>要求项目内容</td>
                                                <td>确认</td>
                                            </tr>

                                            {
                                                dataSource.map((e, i) => {
                                                    return e.map((item, index) => {
                                                        return (
                                                            i >= 2 ?
                                                                <tr>
                                                                    {index > 0 ? null : <td rowSpan={e.length}>{i + 1}</td>}
                                                                    {index > 0 ? null : <td rowSpan={e.length} style={{ padding: 5 }}>{item.name}</td>}
                                                                    <td style={{ textAlign: 'left', padding: 5 }}>{i + 1}.{index + 1}  {item.checkStandard}</td>
                                                                    <td>{item.confirm}</td>
                                                                </tr>
                                                                : null
                                                        )
                                                    })
                                                })
                                            }

                                        </tbody>
                                    </table>
                                    <div style={{ display: 'flex', paddingTop: 20, textAlign: 'left' }}>
                                        <div style={{ width: '49%' }}><span>装配员：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                                        <div>&emsp;</div>
                                        <div style={{ width: '49%' }}><span>日期：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                                    </div>
                                    <div style={{ display: 'flex', paddingTop: 20, textAlign: 'left' }}>
                                        <div style={{ width: '49%' }}><span>组长确认：</span><span style={{ display: 'inline-block', width: '76%', borderBottom: '1px solid #000000a6' }}></span></div>
                                        <div>&emsp;</div>
                                        <div style={{ width: '49%' }}><span>日期：</span><span style={{ display: 'inline-block', width: '80%', borderBottom: '1px solid #000000a6' }}></span></div>
                                    </div>
                                    <div style={{ width: '100%', textAlign: 'left', paddingTop: 20 }}><span>结论：</span><span style={{ display: 'inline-block', width: '90%', borderBottom: '1px solid #000000a6' }}></span></div>
                                    <div style={{ textAlign: 'right', paddingTop: 10 }}>表格编号：{queryForm?.formData?.formCoding}</div>
                                </div>
                                : null
                        }

                    </div>

                </Layout>
            </div>
        );
    }
}
export default Form.create()(withRouter(BigExamineAssembleDetail));
